<template>
  <div class="my-applications">
    <h3>我的申请</h3>
    
    <el-tabs v-model="activeTab">
      <el-tab-pane label="进行中" name="processing">
        <el-table :data="processingList" style="width: 100%" v-loading="loading">
          <el-table-column prop="type" label="流程类型"></el-table-column>
          <el-table-column prop="title" label="标题"></el-table-column>
          <el-table-column prop="currentStep" label="当前步骤"></el-table-column>
          <el-table-column prop="createTime" label="申请时间"></el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button size="mini" @click="viewProcess(scope.row)">查看流程</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      
      <el-tab-pane label="已完成" name="completed">
        <el-table :data="completedList" style="width: 100%" v-loading="loading">
          <el-table-column prop="type" label="流程类型"></el-table-column>
          <el-table-column prop="title" label="标题"></el-table-column>
          <el-table-column prop="result" label="结果"></el-table-column>
          <el-table-column prop="createTime" label="申请时间"></el-table-column>
          <el-table-column prop="completeTime" label="完成时间"></el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button size="mini" @click="viewProcess(scope.row)">查看流程</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'processing',
      loading: false,
      processingList: [
        {
          id: 1,
          type: '请假申请',
          title: '事假申请',
          currentStep: '部门经理审批',
          createTime: '2025-03-11 09:00:00'
        }
      ],
      completedList: [
        {
          id: 2,
          type: '请假申请',
          title: '年假申请',
          result: '已通过',
          createTime: '2025-03-10 10:00:00',
          completeTime: '2025-03-10 15:00:00'
        }
      ]
    }
  },
  methods: {
    viewProcess(row) {
      if (row.type === '请假申请') {
        this.$router.push({
          path: '/main/renshi/kaoqing/qingjia-process',
          query: { id: row.id }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.my-applications {
  h3 {
    margin-bottom: 20px;
  }
}
</style> 